<!--
 * @Author: fangshengchu
 * @Date: 2024-05-07 13:36:32
 * @LastEditTime: 2024-05-08 08:56:55
 * @LastEditors: fangshengchu
 * @Description: 选择规格
 * @FilePath: \szhk-fe\src\views\purchaseArrival\common\search-specifications\index.vue
-->
<template>
  <a-input-search
    v-model="value2"
    placeholder="请选择"
    allow-clear
    @clear.stop="handerClear"
    @search="select"
  />
  <modal v-model:visible="visible" :width="'1000'" :title="props.title">
    <query-form
      :render-config="tableObj.renderConfig"
      :render-keys="tableObj.renderKeys"
      @search="searchHandle"
      @reset="resetHandle"
    />
    <table-container
      v-model:columns="columns"
      :loading="isLoading"
      :all-columns="allColumns"
      @refresh="getData"
    >
      <template #headerLeft>左侧自定义内容</template>
      <a-table
        :columns="columns"
        :data="renderData"
        :loading="isLoading"
        :row-selection="rowSelection"
        @row-click="selectRow"
      />
    </table-container>
  </modal>
</template>

<!--新script-->
<script lang="ts" setup>
  import { computed, reactive, ref } from 'vue';
  import queryForm from '@/common/components/query-form/index.vue';
  import tableContainer from '@/common/components/table-container/index.vue';
  import { sleep } from '@/utils/tools';
  import lodash from 'lodash';
  import modal from './modal.vue';

  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
  });
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const tableObj = {
    api: '/api/',
    renderConfig: {
      name: {
        label: '名称',
        field: 'name',
        componentName: 'input',
      },
      sex: {
        label: '性别',
        field: 'sex',
        componentName: 'select',
        componentProps: {
          options: [
            { label: '男', value: 1 },
            { label: '女', value: 2 },
          ],
        },
      },
      age: {
        label: '年龄',
        field: 'age',
        componentName: 'inputNumber',
      },
      birthday: {
        label: '生日',
        field: 'birthday',
        componentName: 'timePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
        },
      },
    },
    renderKeys: ['name', 'sex', 'age', 'birthday'],
    columns: [
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Salary',
        dataIndex: 'salary',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
      {
        title: 'Email',
        dataIndex: 'email',
      },
    ],
  };
  const columns = computed(() => {
    return tableObj.columns;
  });
  const emit = defineEmits([
    'update:value',
    'update:modelValue',
    'handerClear',
  ]);
  const visible = ref(false);
  const value2 = ref('ddd');
  const select = () => {
    visible.value = true;
  };
  const handerClear = () => {
    emit('handerClear');
  };
  const selectRow = (record: any) => {
    console.log(record, 'record');
    value2.value = record.name;
    emit('update:modelValue', record.name);
    console.log(record.name);
  };
  const searchHandle = (data: any) => {
    console.log('search', data);
  };
  const resetHandle = (data: any) => {
    console.log('resetHandle', data);
  };
  const allColumns = lodash.cloneDeep(columns);
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  const getData = async () => {
    renderData.value = [];
    isLoading.value = true;
    await sleep(2000);
    const data = reactive([
      {
        key: '1',
        name: 'Jane Doe',
        salary: 23000,
        address: '32 Park Road, London',
        email: 'jane.doe@example.com',
      },
      {
        key: '2',
        name: 'Alisa Ross',
        salary: 25000,
        address: '35 Park Road, London',
        email: 'alisa.ross@example.com',
      },
      {
        key: '3',
        name: 'Kevin Sandra',
        salary: 22000,
        address: '31 Park Road, London',
        email: 'kevin.sandra@example.com',
      },
      {
        key: '4',
        name: 'Ed Hellen',
        salary: 17000,
        address: '42 Park Road, London',
        email: 'ed.hellen@example.com',
      },
      {
        key: '5',
        name: 'William Smith',
        salary: 27000,
        address: '62 Park Road, London',
        email: 'william.smith@example.com',
      },
    ]);
    renderData.value = data;
    isLoading.value = false;
  };

  getData();
</script>

<style lang="less" scoped>
  .base-component {
    color: red;
  }
</style>
